<template>
  <h1 class="title">
    <span class="content">课程目录</span>
  </h1>
  <!-- 无数据 -->
  <div v-if="chapterSectionList" class="w-100% mt-20">
    <svg-icon
      name="sour_face"
      class="svg"
      width="150px"
      height="150px"
    ></svg-icon>
    <span class="f-c-c mt-5 color-#909399">暂无章节课时，请稍后再试~</span>
  </div>
  <div class="chapter" v-else>
    <div
      class="chapter_item"
      v-for="(chapter, chapterIndex) in chapterSectionList"
      :key="chapter.chapterId"
    >
      <!-- 章节 -->
      <div class="chapter_title">
        <div class="catalog_num">
          <span>
            <i>
              <em style="font-style: normal">{{ chapterIndex + 1 }}</em>
            </i>
          </span>
        </div>
        <div class="catalog_name flex-grow-1">
          <div class="clicktitle">
            <span :title="chapter.title">
              {{ chapter.title }}
            </span>
          </div>
        </div>
      </div>
      <!-- 课时 -->
      <div class="section">
        <ul>
          <li
            v-for="(section, sectionIndex) in chapter.sections"
            :key="section.sectionId"
            @click="openVideo(section.videoUrl)"
          >
            <div class="catalog_name">
              <div class="clicktitle">
                <span class="pr-5">
                  {{ `${chapterIndex + 1}.${sectionIndex + 1}` }}
                </span>
                <span :title="section.title">{{ section.title }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(['chapterSectionList'])

const openVideo = (videoUrl: string) => {
  // TODO 购买的课程需要付费
  // 新窗口的特征，例如宽度和高度
  //   const windowFeatures = 'width=600,height=400'
  //   window.open(videoUrl, '_blank', windowFeatures)
  window.open(videoUrl, '_blank')
}
</script>

<style scoped lang="scss">
.title {
  margin: 0;
  color: #00061a;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding: 24px 0 24px;
  line-height: unset;
  vertical-align: middle;
  .content {
    border-left: 5px solid #333;
    padding-left: 5px;
    line-height: 24px;
  }
}
/* 章节list */
.chapter {
  cursor: pointer;
  .chapter_item {
    /* 章节 */
    .chapter_title {
      display: flex;
      align-items: center;
      background: #f5f7fa;
      padding: 13px 20px;
      border-radius: 10px;
      .catalog_num {
        display: flex;
        align-items: center;
        height: 20px;
        padding-left: 14px;
        background: #d0d5db;
        border-radius: 10px;
        margin: 0 20px 0 0;

        span {
          min-width: 16px;
          height: 16px;
          padding: 4px;
          margin: 0 -4px 0 0;
          background: #d0d5db;
          display: block;
          border-radius: 20px;
          i {
            min-width: 12px;
            height: 16px;
            padding: 0 2px;
            line-height: 16px;
            background: #fff;
            font-size: 12px;
            font-family: Arial;
            color: #a8a8b3;
            border-radius: 20px;
            display: block;
            text-align: center;
          }
        }
      }
      .catalog_name {
        display: flex;
        align-items: center;
        max-height: 48px;
        font-size: 16px;
        line-height: 24px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover span {
          color: #3a4b87;
        }
        .clicktitle {
          color: #131b26;
        }
      }
    }
    /* 课时 */
    .section {
      ul {
        list-style-type: none;
        li {
          padding: 10px 0;
          &:hover {
            background: rgb(240, 246, 255);
            border-radius: 10px;
          }
          .catalog_name {
            display: flex;
            align-items: center;
            padding-left: 60px;

            .clicktitle {
              flex-grow: 1;
              &:hover span {
                color: #3a8bff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
